<template>
  <div class="service flex">
    <div class="chat-box">
      <el-tabs
        v-model="editableTabsValue"
        type="border-card"
        closable
        @tab-remove="removeTab"
      >
        <el-tab-pane
          :label="item.title"
          :name="item.name"
          v-for="item in userList"
          :key="item.name"
          >
          <chat>
          </chat>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="tools-box">
      <div class="func common-tool">
        <span>功能:</span>
        <div class="flex align-center">
          <div class="flex align-center">
            <img src="../../assets/images/end-chat.png" alt="" /> 结束当前会话
          </div>
          <div class="flex align-center">
            <img src="../../assets/images/record-feed.png" alt="" />
            记录当前用户反馈
          </div>
        </div>
      </div>
      <div class="used-reply common-tool">
        <span>常用回复:</span>
        <ul>
          <li
            class="reply-li cell"
            v-for="(item, index) in replyMsg"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
        <div class="add-reply" @click="dialogFormVisible = true">添加</div>
      </div>

      <!-- 添加常用回复弹窗 -->
      <el-dialog
        custom-class="dia-used-reply"
        :modal-append-to-body="false"
        :visible.sync="dialogFormVisible"
        width="80%"
      >
        <div slot="title" class="dialog-footer">
          <div class="dia-title flex align-center">
            <img src="../../assets/images/watch.png" alt="" />添加常用回复
          </div>
        </div>
        <div class="dia-body">
          <div>
            <div class="db-title flex flex-end">回复内容</div>
            <el-input
              type="textarea"
              resize="none"
              placeholder="请输入回复内容"
              v-model="replyContent"
            ></el-input>
            <span class="must">{{ replyCount }}/200</span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer flex just-center">
          <el-button type="primary" @click="addReply">添加</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >取消</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import chat from "../../components/chat.vue";
export default {
  components: {
    chat,
  },
  data() {
    return {
      replyMsg: [
        "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
      ],
      userList: [
        {
          title: "用户1",
          name: "1",
          id: 1,
        },
        {
          title: "用户2",
          name: "2",
          id: 2,
        },
        {
          title: "用户3",
          name: "3",
          id: 3,
        },
        {
          title: "用户4",
          name: "4",
          id: 4,
        },
      ],
      replyCount: 0,
      replyContent: "",
      dialogFormVisible: false,
      editableTabsValue: "1",
    };
  },

  created() {},
  methods: {
    addReply() {},
    removeTab(targetName) {
      let tabs = this.userList;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.userList = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>

<style>
.chat-box {
  /* width: 80%; */
  width: 80vw;
  min-width: 800px;
  height: 100vh;
}

.tools-box {
  box-sizing: border-box;
  padding: 13px 0;
  background-color: #f5f5f5;
  width: 20vw;
  min-width: 330px;
  height: 100vh;
  overflow-y: auto;
}
.common-tool {
  padding: 10px;
  margin: 0 13px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  background-color: #fff;
}
/* .tools-box .func {
  
} */
.tools-box .func span,
.add-reply,
.used-reply span {
  color: #37c1c3;
}
.tools-box .func img {
  margin: 0 7px 0 0;
}
.tools-box .func > div {
  margin: 8px 0 0 0;
}
.tools-box .func > div div:first-of-type {
  margin: 0 16px 0 0;
  cursor: pointer;
}
.tools-box .used-reply {
  margin-top: 10px;
}
.tools-box .used-reply ul {
  padding: 8px 0 5px;
}
.reply-li {
  margin: 5px 0;
  color: #666666;
}

.add-reply {
  padding: 10px 0 0;
  border-top: 1px solid #d6dadf;
  text-align: center;
}

/* tab标签样式 */
.el-tabs__nav-scroll {
  height: 3.5%;
  background-color: #fff;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  color: #fff;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item{
  color: #333;
  background-color: #F5F5F5;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-of-type(even){
  background-color: #fff;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:hover{
  color: #333333 !important;
}
</style>